前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11

Array Change Detection

Mutation Methods

Vue 包裝了一些可以改變陣列的方法，這些方法會觸發陣列的變更通知，這些方法包含：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你可以打開 console 來測試先前的範例：

example1.items.push({ message: 'Baz' })

Replacing an Array

比起 mutation 方法會改變原本的陣列，你也可以使用一些 non-mutation 的方法來取代原本的陣列，像是 filter()、concat()、slice()。這些方法不會改變原本的陣列，而是回傳一個新的陣列，所以你需要將新的陣列指派給原本的陣列：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

在上面的範例中，我們使用 filter() 來過濾掉不符合條件的項目，並且將結果指派給 example1.items。

Displaying Filtered/Sorted Results

在上一節中，我們使用 filter() 來過濾掉不符合條件的項目，並取代原本的陣列。但是，如果我們想要保留原本的陣列，並且只是顯示過濾後的結果呢？這時候我們可以使用 computed 屬性來處理，
舉例來說，在下面的範例中，我們使用 computed 屬性來處理 evenNumbers，並且將結果回傳。

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

若在某些條件下無法使用 computed 屬性，你也可以使用一個方法來處理，
例如以下範例中，我們使用 methods 屬性來處理 even，並且將結果回傳。

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for with a Range

你可以使用 v-for 也可以使用一個數字範圍，例如以下的範例中，我們使用 v-for 來產生一個 1 到 10 的數字範圍：

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

將會輸出

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5 </span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

v-for on a <template>

若要顯示一個項目的多個元素，你可以使用 <template> 來包裝這些元素，例如以下的範例中，我們使用 <template> 來包裝一個項目的多個元素，並透過 v-for 迭代這些元素：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for with v-if

特別注意不太建議 v-for 和 v-if 一起使用

當 v-for 和 v-if 一起使用時，v-for 的優先權比較高，例如以下的範例中，我們使用 v-for 來迭代一個陣列，並且使用 v-if 來過濾掉不符合條件的項目，
所以在這個範例中，v-if 會在每個迭代中被檢查，並且過濾掉不完成的項目。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

如果你想要在迭代之前過濾掉不符合條件的項目，你可以先用 v-if wrapper 一個 element(or template)，並且在 element 中使用 v-for，
在以下範例中，我們使用 v-if wrapper 一個 <ul>，並且在 <ul> 中使用 v-for 來迭代一個陣列，
當 todos 陣列的長度大於 0 時，<ul> 會被渲染，並且在 <ul> 中使用 v-for 來迭代 todos 陣列，
反之，<p> 會被渲染。

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

Reference

• https://v2.vuejs.org/v2/guide/list.html